import { Card, Descriptions } from 'antd';
import React, { useEffect, useState } from 'react';
import { getName, getVersion } from '@tauri-apps/api/app';
import { confirm } from '@tauri-apps/plugin-dialog';
import { check } from "@tauri-apps/plugin-updater";
import { relaunch } from "@tauri-apps/plugin-process";
import styled from 'styled-components';


export const AboutSettingView = (props: { category?: string, onClick?: (category: string, item: any) => void }) => {

    const [version, setVersion] = useState<string>('');

    const [loading, setLoading] = useState<boolean>(false);

    const [message, setMessage] = useState<string>('');

    const checkVersion = async () => {
        setLoading(true);
        console.log('软件版本检测.....');
        setMessage('软件版本检测.....');
        const update = await check();
        console.log('软件版本检测结果:', update);
        if (update?.available) {
            console.log('升级可用.....');
            setMessage('有更新，下载文件.....');
            await update.downloadAndInstall();
            console.log('安装下载完成!开始重启!');
            const confirmed2 = await confirm('安装下载完成!确实是否重启应用？', { title: '升级重启', kind: 'warning' });
            if (confirmed2) {
                await relaunch();
            }
            setLoading(false);
            setMessage('');
        } else {
            setLoading(false);
            setMessage('');
        }

    };

    useEffect(() => {
        getVersion().then((v) => {
            setVersion(v);
        });
        //版本检测
        checkVersion();
    }, []);



    return (
        <Container>
            <StyledCard>
                <Descriptions title={'关于图灵忆'} layout={'horizontal'} column={1}>
                    <Descriptions.Item label="">{'图灵忆，可以画图、查看数据的软件。来源于当前信息化的时代，数据化信息很难检索和查看，所以有了数据可视化，使用图形化的方式查看数据。Data Graph两个词联系起来，软件未来以数据为依托底座，用图形展示出来并方便用户使用。'}</Descriptions.Item>
                    <Descriptions.Item label="版本">
                        <div onClick={async () => {
                            await checkVersion();
                        }}>{version}</div>&nbsp;
                        {loading ? message : ''}
                    </Descriptions.Item>
                    <Descriptions.Item label=""><a target='_blank' href={'https://www.idns.link/docs/index.html#/changelog/README'}>{'更新日志'}</a></Descriptions.Item>
                    <Descriptions.Item label="" ><a target='_blank' href={'https://www.idns.link/docs/index.html#/'}>{'帮助文档'}</a></Descriptions.Item>
                </Descriptions>
            </StyledCard>
            <StyledCard>
                <Descriptions title={''} layout={'horizontal'} column={1}>
                    <Descriptions.Item label="">{'图灵忆 版权所有 2024 北京软软科技有限公司. 保留所有权利。'}</Descriptions.Item>
                    <Descriptions.Item label=""><a target='_blank' href={'https://www.idns.link/docs/index.html#/agreement/README'}>{'服务条款'}</a></Descriptions.Item>
                </Descriptions>
            </StyledCard>
        </Container>
    );
}

export default AboutSettingView;

const Container = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap:10px;
    padding:20px;
    padding-top:30px;
`;

const StyledCard = styled(Card)`
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
`


